BlogPoint: Posts

SharePoint – A Global Navigation Solution Across Site Collections – Permissions

Peter Allen — Thu, 01 Jul 2010 14:54:58 GMT

Body:

I have deployed this solution with several clients and in doing so I have added some functionality. One of those areas is Permissions. If you have not read my previous posts on this topic please check them out:

Article I - SharePoint - A Global Navigation Solution across Site Collections
Article II - SharePoint – A Global Navigation Solution Across Site Collections – Version 2.0 Primer and Deployment
Articles III - SharePoint - A Global Navigation Solution across Site Collections – Version 2.0 Solution

Permission can be added to version 1.0 or 2.0 and there is no different in how it is implemented. Actually it is very simple since we will use out of the box features to accomplish this. We will have the ability to apply permissions to a Tab and/or to a pull down item.

To apply permissions so that a tab or pull down item is only viewable to a specific audience we will use SharePoint’s feature of specify permissions at the item level. Now this is know in the SharePoint community as not a best practice, but I believe in this case it an exception to the rule that works well for its purpose. I preach to my clients not break permissions and not to break them at the item level, so when I tell them that we have to do this for this solution they say to me, but you told us not to do that. There are exceptions to every rule and here is one.

Implementing this solution is simple. For each tab or pull down item you will change the Manage Permissions settings to Edit Permission. At this point you can now add and delete groups that should have access to this item. (Caution: Do not delete the group that gives you permission to edit the item. If you do then you will have to ask the Admin to add you back to edit the item. I know form experience.)

Here is a step by on how to do this.

Step 1

Select the item to apply permissions to and select Manage Permissions.

Step 2

Next you will then break the inheritance of permissions by selecting Actions and then Edit Permissions.

Step 3

You will get a warning that you are breaking permissions. You will select Yes to this warning.

Step 4

Next you will select New so that you can add the groups or people that need to have access.

Step 5

Add the groups or people that should have access and set the user permission to read only. Next

That is it and now the tab or pull down will only show up if the person has permissions to view it.

Depending on how SharePoint permissions are setup in your environment this this can be easy or be complicated. What do I mean by this? Well an environment that uses Active Directory groups will have a much easier time with this then an environment that directly adds users to the three standard permissions groups for a site. Since this solution does not pull permissions based on the location of the link in the pull down, you have to maintain permissions on your site as well as here. IF you do this through AD groups then it is much easier as you add the same AD groups to the item and you will only need to update the AD group to change who can see the item.

Hope this helps.

Category: SharePoint;SP-Javascript/JQuery;SP-Lists;SP-Navigation

Published: 7/1/2010 2:09 PM

SharePoint - A Global Navigation Solution across Site Collections – Version 2.0 Solution

Peter Allen — Sat, 15 May 2010 14:16:35 GMT

Body:

My solution for A Global Navigation Solution across Site Collections has been upgraded to version 2.0. If you have not read my previous posts on this topic please check them out:

In version 2.0 I have streamlined the code and reduced the number of lists needed to create the pull downs and now use a list for creating the tabs. So once you set it up you can easily add tabs and pull downs to a tab, by simply updating the tabs list or the pull down list and all site with this solution will see the changes.

I have also refined the tabs to show the when there is a pull down. Also, pull downs now can have popup descriptions for each listed item, if you like. All you need to do is populate the Notes field in your pull down list, unpopulated notes will show nothing.

If you have not implemented this solution yet then follow all the steps listed below. If you have implement my version 1.0, the changes you will need to make are updating the code in the topnavigation.js file and create two new lists for your tab and pull down. Your infrastructure, code you added to your masters pages, you created does not need be changed at all.

Let take a look at version 2.0 changes. Below is an image of how the pull downs can look showing all the features.

Version 2.0 Global Navigation Features

In version 2.0 I have added MOSS features and as a result the following features were added:

Pull Down icon will only appear on those that you indicate have a pull down. So now you can have a standard tab or a tab with a pull down where the will show indicating there is more to view.
By adding comments in the notes section of the links, they will then become pop-ups when you hover over a link.
New version only requires one list for the tabs and one list for all the pull downs.

When I implemented this on my site www.bitsofsharepoint.com I created a site where I housed all of the lists and libraries. Below is an image of the what a proper implementation would look like. You will notice we have the two lists for tabs and pull downs, and we have the Scripts library where our three scripts are housed.

View example here: http://www.bitsofsharepoint.com/ExamplePoint/navigation2/default.aspx

Now lets create and implement the solution. Below are the components that you will need. Though this may look like a lot, it is very simple. Add three lists and libraries, add code to your master page, change code in a script file, and add your tabs and pull downs to the lists and that is it.

Components needed:

SharePoint Resource Site
SPServices by Marc Anderson
jQuery
SharePoint Designer to edit Master Pages
SharePoint Links List for Tabs and Pull Downs
Solution Code

1) SharePoint Resource Site

I recommend that if you do not already have a site collection devoted to scripts and lists that will be accessible by all, that you create one. This site collection will allow you to have document library where you can house your scripts like jQuery and SPServices. It will also allow you to create lists as needed for example the one we will create to manage the pull down items in our tab.

So there should be a site collection where we house the below files and list and that has permissions set to all authenticated members as read only. For purposes of this article I will call this site collection Resources. I wrote an article along these lines and here it is: http://www.bitsofsharepoint.com/BlogPoint/Lists/Posts/Post.aspx?ID=29

2) SPServices by Marc Anderson

We need to download the SPServices file that Marc Anderson has put together. You can find it here: http://spservices.codeplex.com/ This file will be used by the script for this solution, so this will need to be added to the document library where you keep scripts. In my case it would go into the document library in my Resources site collection.

Recommendation is to change the name of the file name so that it does not have a version number and should look like this, “jquery.SPServices-latest.min.js”. This will allow you to update in the future to Marc’s latest version without having to go back to each master page and change to the new version name.

3) jQuery

There are two ways to work with a jQuery file. You have a choice of downloading the latest version and putting it in scripts document library or you can point to Google's version which will always be the latest version. This is a choice that you will make. You can download jQuery from here: http://jquery.com/

I would then add this script to me document library in my Resources site collection.

4) SharePoint Designer to edit Master Pages

You will need to have access to SharePoint Designer and be able to edit the Master Pages on the sites you want the global navigation tab to show up on. When you edit a master page you will want to add the following code between the

tags as diagramed below.

Here is the code you will need to add to each master page. Make sure that the URL’s point to where you have the files housed. They do need to be absolute URL’s, as you will be adding this code across site collections, web apps and even servers.

For example if I put “jquery-latest.js”, “jquery.SPServices-latest.min.js”, and “topnavigation.js” in my Resoures site collection in the document library called ScriptsLibrary, then it would look like this:

5) SharePoint Links List for Tabs and Pull Downs

In version 2.0 we now can pull the tabs and pull downs from just two lists. This makes it much easier to maintain and deploy. Now we only need to go to the Tabs list to add another tab. In the Tab Pull Down list we can associate a pull down to any of the tabs. This will make it very easy to switch a pull down from one tab to another if needed.

Tabs List

First lets create the Tabs list. This list will be a custom list. This list must be called “Tabs”. Here are the columns to add. The columns have to be the same as well for the solution to work.

Title – This is the name of the Tab.
- Description: Name of the Tab.
Pull Down – This is a yes/no field. Selected will the pull down items. Unselected will show no pull down or .
- Description: Uncheck the box to indicate the Tab will have NO pull down. This will eliminate the pull down image.
Location – This is a choice field. The choice is “Left” or “Right”. This will tell the tab to either be on the left site of the top navigation or the right site.
- Description: Choose if the tab will be to the left or right of the default taps.
Tab Link – This is a single line of text field. This is where the URL for the tab would go.
- Description: Enter a url to give the tab a link, otherwise leave blank for no link. Make sure link has http://
Order Tabs – This is a choice field. Make a selection from A to K. This will be how you order your tabs on the left or right.
- Description: RIGHT orders in ascending manner. A – Z LEFT orders in descending manner. Z – A

Next lets change the All Items view to sort and Group appropriately. This view will dictate the the order the tabs show up.

On All Items view you will want to Modify View and make the following changes.

Sort – Change the following:

Sort by “Order Tab” in “ascending order”.

Group By – Change the following:

Group by to “Location” in “ascending order”.
And set to “Expand”.

Tab Pull Down List

Next lets add the Tab Pull Down list. This list will be a standard links list. This list must be called “Tab Pull Down”. Here are the columns to add in addition to the standard columns. The columns have to be the same as well for the solution to work.

Tab – This columns is a look up column looking up the “Tab” list with the Title column being looked up.
Group – This column will be used to group the links together. So all “Help” links will be together and all “Features” links will be together.
- This is a text field or it can be a choice field if you know all the groups.
LinkType – This column will be used to identify what type of link it is.
- This is a Choice column.
- We have three choice types and each will cause the pull down to display the link in different way:
  - Link – This will display the item as a link within the group.
  - Header – This will display the item as a header without a link.
  - Header Link – This will display the item as a header with a link.
    - (Header and Header Link look them same, but act differently)

Next you will want to change the default All Links view to the following:

Sort – Change the following:
- All users to order items in this view, set to “No”.
- Sort by “LinkType” in “ascending order”.
- And Sort by “URL” in “ascending order”.
Group By – Change the following:
- Group by to “Tab” in “ascending order”.
- Group by to “Group” in “ascending order”.
- Show grouping as “Expanded”.

This new view will be the way the items show in the pull down for the global navigation. So you can play with the view here to sort and group it as you wish.

Here is an example of what it should look like once you have lists setup. You will also notice that I have made a connection between Tabs and Tab Pull down so that I can essentially filter my view to show what the tab and associated pull down items are.

View example here: http://www.bitsofsharepoint.com/ExamplePoint/navigation2/default.aspx

6) Solution Code

In version 2.0 I have made it so that you only have to change one thing and then you never have to touch this file again.

In the code below or in the topnavigation.js file you will need to change the following:

listSiteTabURL = 'http://www.bitsofsharepoint.com/topnav/';

You will find this code at the top. Change http://www.bitsofsharepoint.com/topnav/ to the site that your Tab and Pull Down List are located. URL needs to be of the site location NOT of the list location.

Incorrect Example: 'http://www.intranet.com/SiteName/List/ListName/'
Correct Example: 'http://www.intranet.com/SiteName/'

Once you make that change you can save the file in your scripts library and you are done with that file.

Here is the code to add to the topnavigation.js file or you can download the topnavigation.js file from here: http://www.bitsofsharepoint.com/ExamplePoint/Download/topnavigation.js

$(document).ready(function(){
    listSiteTabURL = 'http://www.bitsofsharepoint.com/topnav/';
    $().SPServices({
        operation: "GetListItems",
        webURL: listSiteTabURL,
        listName: 'Tabs',
        async: false,
        completefunc: function (xData, Status) {
            $(xData.responseXML).find('[nodeName=z:row]').each(function() {
                var i = 1;
                var tabSide = $(this).attr("ows_Location");
                var titleTabName = $(this).attr("ows_Title");
                var urlTab = $(this).attr("ows_Tab_x0020_Link");
                var tabPullDown = $(this).attr("ows_Pull_x0020_Down");
                var listName = 'Tab Pull Down';
                var listSiteURL = listSiteTabURL;
                var titleTabID = 'zz1_TopNavigationMenun' + titleTabName.replace(/[-' ']/g,'');
                var showTabPD = titleTabID + 'Show';
                var showTabAppend = titleTabID + 'Append';
                if (urlTab != null) {
                    var urlTabShow = 'href=' + urlTab;
                } else {
                    var urlTabShow = '';
                }

                if (tabPullDown == true) {
                    var tabImage = '';
                    var pullDown = '

';
                } else {
                    var tabImage = '';
                    var pullDown = '';
                }

                var tableRow = ''    + titleTabName + ''+ tabImage +''+ pullDown +'';
                if (tabSide == 'Left') {
                    $('table#zz1_TopNavigationMenu').children().children().prepend(tableRow);
                } else {
                    $('table#zz1_TopNavigationMenu').children().children().append(tableRow);
                }

                $().SPServices({
                    operation: "GetListItems",
                    webURL: listSiteURL,
                    listName: listName,
                    async: false,
                    completefunc: function (xData, Status) {
                        $(xData.responseXML).find('[nodeName=z:row]').each(function() {
                            var URLdataTN1 = $(this).attr("ows_URL").split(',');
                            var linksTN1 = $(this).attr("ows_LinkType");
                            var TabTN1 = $(this).attr("ows_Tab").split('#');
                            var TabC = TabTN1[1];
                            var notesVar = $(this).attr("ows_Comments");
                            if (notesVar == null) {
                                var notes = '';
                            } else {
                                var notes = 'title="' + notesVar + '"';
                            }

                            if (titleTabName == TabC) {
                                if (linksTN1 == 'Header') {
                                    $('#' + showTabAppend).append('

' + URLdataTN1[1] + '

');
                                    i++;
                                } else if (linksTN1 == 'Header Link') {
                                    $('#' + showTabAppend).append('

' + URLdataTN1[1] + '

');
                                    i++;
                                } else {
                                    $('#' + showTabAppend).append('

' + URLdataTN1[1] + '

');
                                    i++;
                                }
                            } else {
                            }
                        });
                    }
                });

                $('#' + titleTabID).mouseover(function(){
                    $('#' + showTabPD).show();
                });
                $('#' + titleTabID).mouseleave(function(){
                    $('#' + showTabPD).hide();
                });
            });
        }
    });

});

View example here: http://www.bitsofsharepoint.com/ExamplePoint/navigation2/default.aspx

I will also be coming out with a template version that will allow you to load this without having to create the lists and libraries needed and will have the Script library populated with the needed scripts.

Hope version 2.0 helps.

Category: SharePoint;SP-CSS/Theme;SP-Document Library;SP-Lists;SP-Javascript/JQuery;SP-Navigation;SP-Site Design

Published: 5/15/2010 10:26 AM

Attachments: http://www.bitsofsharepoint.com/BlogPoint/Lists/Posts/Attachments/63/image_2_475D05A6.png
http://www.bitsofsharepoint.com/BlogPoint/Lists/Posts/Attachments/63/image_4_196FB2EE.png
http://www.bitsofsharepoint.com/BlogPoint/Lists/Posts/Attachments/63/image_thumb_1_196FB2EE.png
http://www.bitsofsharepoint.com/BlogPoint/Lists/Posts/Attachments/63/image_thumb_475D05A6.png

SharePoint – A Global Navigation Solution Across Site Collections – Version 2.0 Primer and Deployment

Peter Allen — Tue, 11 May 2010 15:24:51 GMT

Body:

This article is going to recount my experience of adding my global navigation to my current site and highlight my next version of the global navigation solution that is a template and should make it much easier to implement, deploy and use. If you have not read my first article SharePoint – A Global Navigation Solution Across Site Collections, please read that first.

This article will be broken up into two sections:

What were the results and process like to deploy this solution across sites.
What new features have been added in version 2.0

Implementation Process and Results

Let’s first take a look at the results. My site is a WSS 3.0 version so top navigation pull downs are not an out of the box feature, just tabs are standard. You will also notice that we indicate which tab has a pull down by the standard triangle icon . The items are highlighted all based on SharePoint standard CSS so that when you change themes the tabs and pull downs follow. I also added the feature that allows you to have a description pop up when you hover over a link. All of these features are standard in MOSS.

Here is what the before and after view looks like.

BEFORE

AFTER

Now deploying this solution involved using SharePoint designer to edit the Master pages of each site I wanted the navigation to be added to. I then would add three lines of code. Here is one lesson that I found quickly that affect the ease of implementation. jQuery is a wonderful service that when implemented correctly works wonders, but when implemented incorrectly causes problems. Nothing that can’t be fixed, but just involves extra steps. Now I am guilty of causing these problems and it was interesting to see when I had implemented jQuery correcting, implementation of the global navigation was very easy, but when I implemented jQuery incorrectly it caused me to have extra steps.

What is a incorrect implementation of jQuery you may ask, well it is when you hard code a request for jQuery in a CEWP solution that causes problems. Remember I am editing the Master Page and adding jQuery at this level. All pages using this Master Page will load with jQuery and then all CEWP that use and have jQuery hard coded will have conflicts. So what does that look like? Here is hard coding the jQuery in a CEWP that will cause problems:

Why does this cause problems? Well when you have multiple instances of this code on the same page you will get in a conflict especially if they are different versions being called.

Now the correct way for any CEWP solution should be the way the Paul Grenier provides in his solutions. It first checks to see if jQuery has been loaded and if it has it will not load another version. Here is an example of his code.

So how did I fix the sites that had this problem where the CEWP solutions had hard coded jQuery references. Well I had to go into each CEWP that had it the wrong way and delete the reference to jQuery. This was fine to do as I was loading jQuery in the Master Page so it will be available to the CEWP that was calling for it.

I will be going through my solutions that use jQuery to make sure that I am using Paul Grenier’s method so that my solutions do not cause this problem in the future.

Deploying this solution once implemented involved editing Master Pages on site collections where the global navigation was to be used. In cases where the global navigation was deployed, but did not show up was a simple fix of editing the CEWP that had a reference to jQuery.

In my next article I will go into depth about implementing my global navigation newest version 2.0.

Version 2.0 Global Navigation Features

In implementing and deploying this on my site I have had time to reflect on what features were missing from MOSS and my current 1.0 version and looked at how to add these to mirror a similar experience. As a result version 2.0 will have the following features added:

Pull Down icon will only appear on those that you indicate have a pull down. So now you can have a standard tab or a tab with pull down where the will show indicating there is more to view.
By adding comments in the notes section of the links, they will then become popups when you hover over a link.
New version only requires one list for the tabs and one list for all the pull downs.

I will also be coming out with a template version that will allow you to load this without having to create the lists and libraries needed. You will only need to change the code in one place on the topnavigation.j file and add the three lines of code to the Master Page. Below is an image of the template:

Next article on this matter should have the new version and the template.

Category: SharePoint;SP-CSS/Theme;SP-Document Library;SP-Javascript/JQuery;SP-Lists;SP-Navigation;SP-Site Design

Published: 5/12/2010 3:00 PM

Tab Page for SharePoint Version 2.0

Peter Allen — Fri, 07 May 2010 20:20:49 GMT

Body:

About a year ago I created a tabs page that allowed you to have up to 8 tabs on a page and each tab can have multiple web parts added. One of the features that was missing was that tabs were not sticky. If you refreshed the page it would always go back to the first tab. Well, I have found some time to add cookies so that it will remember the last tab you were on. This now make it much easier to edit web parts and to use tabs with document libraries and lists.

If you have implemented the solution already then you will need to edit the page with SharePoint Designer to add the code. Or you can download the latest version and implement with the latest version.

You can find the latest version and instructions on how to update your current implementation here: http://www.bitsofsharepoint.com/ExamplePoint/Site/TabPage.aspx

Category: SharePoint;SP-Document Library;SP-Javascript/JQuery;SP-Lists;SP-Site Design

Published: 5/7/2010 4:24 PM

SharePoint - A Global Navigation Solution across Site Collections

Peter Allen — Mon, 03 May 2010 23:15:02 GMT

Body:

Ever want to have an easier way to have a global navigation that spans across site collections? SharePoint provides a solution for global navigation within a site collection and it works well. But when you architect SharePoint to have multiple web apps and site collections you do not have any easy solution to create a global navigation system to span those repositories. You would have to recreate your global navigation on each site collection. And any changes to the global navigation would mean that you would have to go to each site collection to make the change…ouch!!! There has got to be a better solution.

Thanks to Marc Anderson and Michael Greene who have created solutions that inspired me to explore solving this problem. Marc Anderson created SPServices, which is a jQuery library for SharePoint Web Services. I am beginning to understand the power of his solution. Then Michael Greene created a solution, Application Wide Quick Launch Control, where you can change or append the Quick Launch on SharePoint sites. Michael’s solution used Marc’s SPServices and jQuery.

Based on what these two have done, I then looked into how we could apply this to the Top Navigation found in SharePoint.

My goal was to do the following:

Be able to add a tab at the beginning or end of the Top Navigation bar.
Create a pull down to maximize space.
- Ever see a top nav bar with too many tabs, ouch.
Pull down items are pulled from a standard SP Links list.
- Imagine being able to add an item to a list and it is then apart of the top navigation across site collections, yes!
- WSS does not give us the ability to have a pull down, lets change that.
Ability to order and group pull down items.
- Organization is critical to ease of use.
Grouping Headers can be links or not.
Navigation tab and pull down changes with site theme.
Tabs can be links or not.

What is the end product going to look like, well, something like this. Where we have added a tab called “Services” with a pull down that is grouped. This is a WSS site, where this is not possible out of the box.

And we are pulling this from a list. Take a look at the TopNav links list below. You can see the grouping and ordering is working as well.

Now lets walk through what we have to do to get the above results.

Components needed:

SharePoint Resource Site
SPServices by Marc Anderson
jQuery
SharePoint Designer to edit Master Pages
SharePoint Links List
Solution Code

1) SharePoint Resource Site

2) SPServices by Marc Anderson

3) jQuery

I would then add this script to me document library in my Resources site collection.

4) SharePoint Designer to edit Master Pages

tags as diagramed below.

5) SharePoint Links List

Now to create the ease of updating and managing the content in the pull down for the tab, we will need to have a list where the solution can pull the links from. But we also need to create some organization and groupings. So will will create a links list and add some additional columns.

In my Resources site collection I will create a list called TopNav, you are free to name it what you like. This TopNav list will be a Links list. Once created we need to add a couple of other columns:

Group – This column will be used to group the links together. So all “Help” links will be together and all “Features” links will be together.
- This is a text field or it can be a choice field if you know all the groups.
LinkType – This column will be used to identify what type of link it is.
- This is a Choice column.
- We have three choice types and each will cause the pull down to display the link in different way:
  - Link – This will display the item as a link within the group.
  - Header – This will display the item as a header without a link.
  - Header Link – This will display the item as a header with a link.
    - (Header and Header Link look them same, but act differently)

Next you will want to change the default All Links view to the following:

Sort – Change the following:
- All users to order items in this view, set to “No”.
- Sort by “LinkType” in “ascending order”.
- And Sort by “URL” in “ascending order”.
Group By – Change the following:
- Group by to “Group” in “ascending order”.
- Show grouping as “Expanded”.

This new view will be the way the items show in the pull down for the global navigation. So you can play with the view here to sort and group it as you wish.

Here is an example of what it should look like once you have several links listed.

Almost there……yeah.

6) Solution Code

Ok, now for the code that will make this all work together. There is a file called topnavigation.js that we will need to be created and edited to make it work in your environment.

In my case it would go into the document library in my Resources site collection.

To make this script work you will need to provide several pieces of data which are listed out below.

[tabSide] - Specify either 'append' or 'prepend'. This will indicated if the new tab will go before or after the default tabs.
- Tab front Example: 'prepend'
- Tab End Example: 'append'
[titleTabName] - Specify a name for the tab, this will be displayed in the tab.
- Tab Name Example: 'Intranet'
[urlTab] - Specify a link only if you want the tab to be clickable, otherwise leave blank with two quotes, ''.
- Link Example: 'http://www.google.com'
- No Link Example: ''
[listName] - Specify the name of the list for the pull down.
- List Name Example: 'Links'
[listSiteUrl] - Specify the url of the site where the list is located. URL needs to be of the site location NOT of the list location.
- Incorrect Example: 'http://www.intranet.com/SiteName/List/ListName/'
- Correct Example: 'http://www.intranet.com/SiteName/'

All above variables will then be constructed as follows, make sure that each field has a ' at the beginning and end of each.

Construct:
- extendedTabs('[tabSide]','[titleTabName]','[urlTab]','[listName]','[listSiteURL]')
Example:
- extendedTabs('append','Projects','http://www.sites.com/Projects/','Projects','http://www.site.com/Resources/');
- This example adds:
  - A tab at the end
  - A link for the Tab to the Project site
  - The list for the pull down is called Projects
  - The list resides in the Resources site.

You can have multiple extendTabs like so:

    extendedTabs('append','Projects','','Projects','http://www.bitsofsharepoint.com/ConsultingPoint/ClientPoint/snc/');
    extendedTabs('append','Team Sites II','http://www.google.com','Team Sites','http://www.bitsofsharepoint.com/ConsultingPoint/ClientPoint/snc/');
    extendedTabs('prepend','Intranet II','http://www.bitsofsharepoint.com/ConsultingPoint/ClientPoint/snc/default.aspx','Links','http://www.bitsofsharepoint.com/ConsultingPoint/ClientPoint/snc/');

There will be three tabs added, with one added the to the front and two added to the back.

Placement of your extendedTabs will dictate the order the tabs are displayed.

Here is the code to add to the topnavigation.js file or you can download the topnavigation.js file from here: http://www.bitsofsharepoint.com/ExamplePoint/CodeExamples/topnavigation.js

$(document).ready(function(){
/*
Extended Tabs by Peter Allen
Version 1.0 5/3/2010
Purpose: Add a tabs to the beginning (prepend) or end (append) of the default SharePoint Top Navigation tabs.
Script Setup: To make this script work you will need to provide several pieces of data which are listed out below.
[tabSide] - Specify either 'append' or 'prepend'. This will indicated if the new tab will go before or after the default tabs.
                Tab front Example: 'prepend'
                Tab End Example: 'append'
[titleTabName] - Specify a name for the tab, this be displayed in the tab.
                Tab Name Example: 'Intranet'
[urlTab] - Specify a link only if you want the tab to be clickable, otherwise leave blank with with two quotes, ''.
                Link Example: 'http://www.google.com'
                No Link Example: ''
[listName] - Specify the name of the list for the pull down.
                List Name Example: 'Links'
[listSiteUrl] - Specify the url of the site where the list is located. URL needs to be of the site location NOT of the list location.
                Incorrect Example: 'http://www.intranet.com/SiteName/List/ListName/'
                Correct Example: 'http://www.intranet.com/SiteName/'
All above variables will then be constructed as follows, make sure that each field has a ' at the begining and end of each.
Construct:
    extendedTabs('[tabSide]','[titleTabName]','[urlTab]','[listName]','[listSiteURL]')
Example:
    extendedTabs('append','Projects','http://www.sites.com/Projects/','Projects','http://www.site.com/Resources/');
This example adds a tab called Projects at the end, tab links to the Project site, the list for the pull down is called Projects and the list resides in the Resources site.
You can have multiple extendTabs like so:
    extendedTabs('append','Projects','','Projects','http://www.bitsofsharepoint.com/ConsultingPoint/ClientPoint/snc/');
    extendedTabs('append','Team Sites II','http://www.google.com','Team Sites','http://www.bitsofsharepoint.com/ConsultingPoint/ClientPoint/snc/');
    extendedTabs('prepend','Intranet II','http://www.bitsofsharepoint.com/ConsultingPoint/ClientPoint/snc/default.aspx','Links','http://www.bitsofsharepoint.com/ConsultingPoint/ClientPoint/snc/');
Placement of your extendedTabs will dictate the order the tabs are displayed.
*/
//    Place your extendedTabs below:
    extendedTabs('append','Projects','http://www.site.com/site/default.aspx','Projects','http://www.site.com/site/');


    var i = 1;
    function extendedTabs(tabSide,titleTabName,urlTab,listName,listSiteURL) {
        var titleTabID = 'zz1_TopNavigationMenun' + titleTabName.replace(/[-' ']/g,'');
        var showTabPD = titleTabID + 'Show';
        var showTabAppend = titleTabID + 'Append';
        if (urlTab != '') {
            var urlTabShow = 'href=' + urlTab;
        } else {
            var urlTabShow = '';
        }
            var tableRow = ''    + titleTabName + '
';
        if (tabSide == 'prepend') {
            $('table#zz1_TopNavigationMenu').children().children().prepend(tableRow);
        } else {
            $('table#zz1_TopNavigationMenu').children().children().append(tableRow);
        }
        $().SPServices({
            operation: "GetListItems",
            webURL: listSiteURL,
            listName: listName,
            completefunc: function (xData, Status) {
                $(xData.responseXML).find('[nodeName=z:row]').each(function() {
                    var URLdataTN1 = $(this).attr("ows_URL").split(',');
                    var linksTN1 = $(this).attr("ows_LinkType");
                    if (linksTN1 == 'Header') {
                        $('#' + showTabAppend).append('
' + URLdataTN1[1] + '
');
                        i++;
                    } else if (linksTN1 == 'Header Link') {
                        $('#' + showTabAppend).append('
' + URLdataTN1[1] + '
');
                        i++;
                    } else {
                        $('#' + showTabAppend).append('
' + URLdataTN1[1] + '
');
                        i++;
                    }
                });
            }
        });
        $('#' + titleTabID).mouseover(function(){
            $('#' + showTabPD).show();
        });
        $('#' + titleTabID).mouseleave(function(){
            $('#' + showTabPD).hide();
        });
    }
});

OK, now lets pull this all together.

Document Library where the following is housed:
- jquery-latest.js
- jquery.SPServices-latest.min.js
- topnavigation.js”
A links list created called TopNav
1. Added columns:
  1. Group
  2. LinkType
2. Changed All Links View
Modified topnavigation.js file as outlined.
1. Add a extendedTab call.
Edited masters pages with SharePoint Designer to add the three lines of code.

You should now be seeing something like this.

Here is a working example: http://www.bitsofsharepoint.com/ExamplePoint/Navigation/default.aspx

Hope this helps.

Category: SharePoint;SP-Navigation;SP-Lists;SP-Javascript/JQuery;SP-Document Library;SP-Site Design

Published: 5/3/2010 7:15 PM

Site Owners – Display and Manage

Peter Allen — Mon, 22 Mar 2010 15:54:34 GMT

Body:

One of the challenges I have with SharePoint is knowing who the site owner is for any given site or sub-site. Ownership is a critical component of any deployment. But ownership should be clearly communicated and maintained.

When I work on a deployment one area that I work on with the organization is to identify who the site owners are. Once this is identified we need to communicate this on the site. But if we rely on each owner to identify this on their site we will have different implementations of this, inconsistency for the end-user to follow and a decentralized setup. Also, there would be no easy way to see who all the site owners are and it would be a lot of work to go to each site to take note. Also, I always recommend that site owners create a club (this sounds so much more fun and less formal then a committee) that can meet on a monthly basis to talk best practices and share experiences and solutions.

Since SharePoint does not have any easy way to identify the site owner and provide a central location to track all this, I have come up with a solution. Below you will find my solution to the problem.

The solution involves a content editor web part (CEWP), a centralized list with a couple of views and a document library. The CEWP will be placed in every site collection and sub site. The CEWP will point to a script that will show the correct site owner based on the site URL. The list will house a list of all owners and the sites they own. The document library will house the script used.

Here is an overview of how it will work. By having the CEWP pulling both the script and list from a central place, you get the benefit of being able to change the ownership from a central place and if you want to customize the script you can do this too and it will be populated to all sites.

The result will look like this. You can then outline who the site owner is and even adding listing like helpdesk, designer or admin. These all can be added at any time.

The final result would look something like this:

Here is a link to the details on how to add this to your SharePoint deployment.

http://www.bitsofsharepoint.com/ExamplePoint/Site/SiteOwner.aspx

Hope this helps,

Peter

Published: 3/22/2010 11:54 AM

JQuery - Manage Multiple implementations of a JQuery Solution

Peter Allen — Thu, 19 Feb 2009 07:14:50 GMT

Body:

This post is all about how do you manage all of the great solutions being created with JQuery and Javascripts. Most of these solutions request that you put the solutions into a CEWP and paste the code into the Source Editor. This is fine if you do it once or twice, but what if you deploy this on many many sites?

How do you update the script when changes are made? You will have to remember each location and update the CEWP. No thank you.

I started out this way and quickly realized that I was going down a road that would lead to insanity, keeping track and managing all the CEWP with the code.

Solution:

Centralize all these great solutions/scripts into one location and then have each CEWP link to the centralized script. All the JQuery and Javascript solutions can be saved as a .txt file.

Can this be done? YES.

The CEWP gives us the ability to link to a text file, where we can have a JQuery or Javascript code. Now we are talking! See the image below.

This image shows me using the Content link to link back to the central location that I have JQuery solutions in text files. When I update the file tip-document-right.txt with an updated script all location where I have deployed this way will be instantly updated. The is GREAT!

Now there are two wonderful things about this.

One is that we can add a CEWP anywhere and link to the script file in a central place.
Two is that you can export the CEWP and create a webpart that can be used by anyone. This webpart would have the link to the central script site.

You now can let everyone use the script solution or webpart AND have the ability to update the script and know that the update will be populated every where the CEWP/webpart and link was deployed.

You will then have the freedom to let others utilize the solution and be able manage the script. Your site will then begin to look like this:

Christophe at pathtosharepoint.wordpress.com has a great article on how to implement something similar. His solution is about having a single script file that is used across sites. This works well when you want to have the same scripts available to multiple sites. Check out his post here: http://pathtosharepoint.wordpress.com/2009/02/15/a-content-editor-web-part-for-every-home/

My post is about how do you let your users have access to these solutions, add only the ones they want, still maintain control of managing the script, be able to update the script and have all site instantly benefit from the update.

Hope this helps,

Peter

Category: SP-Javascript/JQuery;SharePoint

Published: 2/19/2009 1:43 AM

Search Lists and Document Libraries by Metadata

Peter Allen — Wed, 28 Apr 2010 15:59:41 GMT

Body:

A while back I create a solution that would filter a list by the metadata, but would only do this for items and metadata viewable in the current list view. Here are the original articles:

Thanks to all the good feedback and suggestions I have created another solution that will allow you to search any list by its metadata and will search ALL items visible or not. Another feature I have added into this solution is that it can be placed on any pages and when the person searches it will taken them to results page.

In order to do this we will need to have access to SharePoint designer and have permissions to edit with SharePoint designer. SharePoint designer will be used to create a Data View Web Part where results will be displayed.

There are two main steps to create this search.

Create a Search Results page.
Add the Search Web Part to any page.

Let’s go over the process of creating a search page.

Create a Web Part Page.

Next edit it in SharePoint Designer.

Now add a Data View Web Part to a Web Part Zone. To do this you will need to select the list or library from the Data Source Library. The list or library you choose will be the one that is search with this solution.

Then select the what columns want to show. Also add them as a Multiple Item View.

When you save the file you will get a warning, don’t worry go ahead and say yes.

Next you will customize how the list is filtered.

Choose what fields you will filter on or have the search look through.

For the comparison make sure you select contains so that it is not an exact match.

Next for Value your are going to select Create a New Parameter.

Complete the parameter with the following:

Name: Search
Parameter Source: Query String (this is how it looks at the URL for the search criteria)
Query String Variable: Search

For each field/column that you want to search add another to the list and make sure the And/Or is set to Or.

When you click OK your list of items will disappear, but that is OK and is expected.

You are now done with the first major part. If you want to customize the list more, feel free to do so. To customize the Data View web part that has nothing showing just check the box under “Common Data View Tasks” called “Show with sample data”.

The last part is to load the Search Web Part. This web part is one that I created and will need to be downloaded placed on any page of your SharePoint site. I would add this to the Search Results page as well.

Search_List: http://www.bitsofsharepoint.com/ExamplePoint/CodeExamples/Search_List.dwp

Next edit the Web Part with the Rich Text Editor and change the following:

Search Results Location: This should be the full URL of where the Search Results page you created with the Data View Web Part is.
Search Box Location: Designate if it will be on the left, center or right.
Search Title: Name your search so that your end users know what they are searching.

Then save the changes and you should be able to search your list and view the results.

Here you can find a working example: List and Document Library Search

Published: 4/28/2010 11:59 AM

SharePoint Information Architecture with MindManager by MindJet

Peter Allen — Fri, 16 Apr 2010 00:07:36 GMT

Body:

Mind mapping works so well for creating high level and detailed designs of your SharePoint Information Architecture or taxonomy. I have been using MindManager for the last 5 years and found it to be a wonderful tool to communicate information in a clear graphical view. A SharePoint Information Architecture or taxonomy cries out for this kind of view.

I spoke at the Sacramento SharePoint Users Group on the subject of using MindManager from MindJet to help outline and communicate a SharePoint site design and taxonomy. In working with various clients I have developed a template that I use to outline an Information Architecture design to meet their requirements.

When I develop these designs with clients I focus on two types of maps. First I focus on a high level map then I proceed to a more detailed map that gets into the actual settings. When developing these maps I will focus on several key aspects:

Access or Permissions or Authentication: This is one of the critical areas that can dictate a lot about the site design.
- Key aspect: Don’t break permission in your design. As your site grows broken permission will cause great hardship to maintain and with user experience.
Content: Understanding the following will help you to organize your site design.
- Use of the content Projects, quick collaboration, department collaboration, repeatable development, reporting, records management, etc.
- Trusted or in development: Many implementations mix trusted and in development content with each other making finding the right information very difficult and frustrating for end users.
Purpose: Internal use or will clients need access, department specific or cross department needs, etc.
Volume: How much content and how much traffic is expected. This will help determine if a separate Web App is required.
Data Criticality: How critical is that data being up 99.9% of the time. This can also determine if a separate Web App is required.

This information will really help to shape how the Information Architecture and taxonomy should be laid out. Here is an example of a high level site design. I find it to be one of the best ways to have a meaningful discussion about how content will be used in the organization.

Example: ABC Site Structure – PDF Format

Once this is created and agreed upon we can then proceed to the detailed design, which gets into the nuts and bolts of implementing the overall plan.

I have designed a template that makes it easy to drag an drop sites, libraries, lists, site columns and site content types in to build out your site design. I have even included Web Apps so that you can also identify the Web Apps that need to be created and the site collections that will reside in them.

Example: Company Site Structure – PDF Format

Here is a closer look at the details found within a Web App and Site Collection. Each item that has a + will expand to show the details or settings for each one.

With the MindManager software I am able to take complex maps and drill down to just the content that I need to look at. For example I can filter the map to just show document libraries. This will then allow me to only show the document libraries throughout the site and the settings associated with those libraries. So if the policy changed to versioning copies going from 10 to 5 I can easily change it by filtering it down to document libraries and then the setting for each document library.

Based on my workings with clients I have come up with a template that I use to build out the detail diagram for implement SharePoint site design and taxonomy. Currently they are broken down to four major areas.

Web App and Sites – You can add a web app along with a site or you can copy the site and add it to an existing web app.
List and Libraries – Select a Document Library or a List to add to your site collection or sub site.
Content Types – Select to a Content Type to add to a site collection or site. I recommend in the list and libraries to just reference a content type and not document it at the list level.
Columns – Select a column to add a column at the site collection level or the list or library level.

When you expand the above you can see that you get a lot granularity with designing your SharePoint deployment. When this is all completed you can easily had this off to someone else to implement and they will know exactly what to do for each and every site and list.

Example: SharePoint Site Structure Parts – PDF Format

Template: SharePoint Site Structure Parts Template – MindManager Map Format

Other benefits of the MindManager is that not everyone has to have the software to be able to review and discuss the detailed maps. MindManager has an expansive export capability. When you get into complex maps, as this one, you will use one of the many export methods to collaborate with. I can tell you Export as Mindjet Player is the best export for complex maps and gives all involved an easy way to explore the map. The Export as Mindjet Player produces a PDF that anyone with a viewer can see and interact with. Yes, that is correct, you can expand and collapse just like you were in MindManager. Here is an example that you can interact with. Example: ABC Site Structure

In conclusion, this tool, MindManager by MindJet, allows you to create very complex Information Architected sites and taxonomy maps for SharePoint deployment that make it much easier to understand what is be designed and much easier to document and implement.

Here is all of the documentation:

SharePoint Site Structure Parts Template – MindManager Map Format
SharePoint Site Structure Parts – PDF Format
Company Site Structure Example – PDF Format
ABC Site Structure Example – PDF Format
MindManager by MindJet - Software

Hope this helps,

Peter

Category: SharePoint;SP-Navigation;SP-Lists;SP-Document Library;SP-Site Design

Published: 4/15/2010 8:07 PM

SharePoint Themes – More than Pretty Colors – Information Architecture

Peter Allen — Mon, 12 Apr 2010 20:24:09 GMT

Body:

This was first posted at EndUserSharePoint.com: http://www.endusersharepoint.com/2010/04/12/sharepoint-themes-–-more-than-pretty-colors-–-information-architecture/

There are many issues to deal with when creating the Information Architecture for a SharePoint site. One of those challenges is making sure that users understand where they are within the SharePoint deployment. As humans we rely on our senses to help us orient where we are. One of those five senses is sight/visual cues. Visual cues can be a critical aspect of how we identify where we are or what to do. So let’s explore how we can use visual cues to help identify what type of site a user is on in SharePoint.

Within visual cues, color, is a powerful medium. Today we use color in many ways. For example stop lights use of color is second nature, and we all know what GREEN, YELLOW and RED mean. We use color for fire and police. We use color for sport teams. Color is used a lot to help distinguish groups, actions or purpose.

Something that SharePoint provides out of the box is themes. You get 18 different themes, color schemes, available to use right away. Most implementations use themes to provide a different color then the standard blue for their whole deployment. But we are going to use Themes in a whole different way.

Before we get into using themes we must setup the scenario of the SharePoint implementation we are talking about. So, we are working with ABC Company that has a decided they need to share trusted and published information to all employees, they need areas for their departments to collaborate and they need an area where they can have projects that utilize cross functional teams. So we have 3 major areas for this site. We have the following:

Intranet
Work Groups
Projects

Below is a high level diagram showing the SharePoint Information Architecture.

Now that we have SharePoint implementation with structure let’s begin to talk about how themes can help users relate and identify where they are in this implementation. Let’s get back to the example with the stop light. Color helps tremendously with knowing if you can go, need to slow down or stop. When you look at a stop light you do not think if the color is on top, middle or bottom and have not memorized that a location of the light means something. Image if color was taken out of stop light. Difficult to know which light means what. Does the top light mean stop or go?

vs.

So let’s translate this into a SharePoint implementation. Most SharePoint implementations do not follow the way we implemented a stop light, they give the same theme (color) to each major group of sites. It all begins to look the same and users get lost as to where they are and what the content is used for.

Below is my example of the standard implementation of SharePoint today and the classic stop light without color. When you look at each one of these three sites they all look the same. If you look closer, you will see that one says Intranet, another Department A, and the third Projects. All of these have very different uses, the content is different and who can access is different. But they do not look different at all, so to a user they must be the same.

Now take look at the version below where we have applied themes to each of the three major groups. Intranet gets a blue theme, Projects gets a red theme, and Departments gets a green theme.

Now users will begin to understand the different areas of their SharePoint deployment and understand when they are in the Intranet, in a project site or in their department area. You will be amazed at how users will be able to find information easier when they know where they are. They will search in the right areas and understand that they are in the wrong area to even look for the content they need.

One thing to avoid is too much use of color. If themes not only get applied to groups, but also different themes are used within the groups it can become very confusing and get you right back to the problems you had with a single theme.

Again this is part of your Information Architecture and governance. Using themes to identify the group that a user is in will improve usability, help the user to association the type of information to be found to color, how to use that information, and better understanding how their SharePoint implementation is designed.

Using themes is something that can be done out of the box and is as simple as defining what theme will be applied to what groups.

Hope this helps and enjoy.

Peter

Category: SharePoint;SP-Navigation

Published: 4/12/2010 4:24 PM

SharePoint: ToolTip 2.0 (Posted on EndUserSharePoint.com)

Peter Allen — Sun, 21 Mar 2010 15:47:33 GMT

Body:

Well, back in January I posted on www.endusersharepoint.com a solution for adding custom tool tips on a SharePoint page.

I forgot to post it on my blog as well. So here is a link to the article and to my example page:

Enjoy,

Peter

Category: SharePoint;SP-Javascript/JQuery;SP-Navigation

Published: 3/21/2010 11:47 AM